<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>admin</title>
    <script src="__LAYUI__/layui.js"></script>
    <link href="__LAYUI__/css/layui.css" rel="stylesheet"/>
    <link href="__CSS__/index.css" rel="stylesheet"/>
    <style>
        .frame{
            height: 100%;
            width: 100%;
            frameborder:0;
            scrolling:no;

        }
        .layui-tab-item{
            height: 100%;
            width: 100%;
            margin: 0;
        }
    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">admin</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
            <li class="layui-nav-item"><a href="">控制台</a></li>
            <li class="layui-nav-item"><a href="">商品管理</a></li>
            <li class="layui-nav-item"><a href="">用户</a></li>
            <li class="layui-nav-item">
                <a href="javascript:;">其它系统</a>
                <dl class="layui-nav-child">
                    <dd><a href="">邮件管理</a></dd>
                    <dd><a href="">消息管理</a></dd>
                    <dd><a href="">授权管理</a></dd>
                </dl>
            </li>
        </ul>
        <ul class="layui-nav layui-layout-right" lay-filter="testR">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
                    贤心
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="">基本资料</a></dd>
                    <dd><a href="">安全设置</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" name="exit"><a href="javascript:void(0);">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item" name="manage"><a href="javascript:void(0);">用户管理</a></li>
                <li class="layui-nav-item" name="material"><a href="javascript:void(0);">教材</a></li>
                <li class="layui-nav-item" name="treatise"><a href="javascript:void(0);">专著</a></li>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;">


            <div class="layui-tab" lay-filter="demo" lay-allowclose="true">
                <ul class="layui-tab-title" id="tabTitle">
                    <li class="layui-this" lay-id="0">后台管理</li>
                </ul>
                <div class="layui-tab-content" style="width: 100%;height: 425px; ">
                    <div class="layui-tab-item layui-show">欢迎使用</div>

                </div>
            </div>



        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
    </div>
</div>
<script>
    //JavaScript代码区域
    layui.use(['element','jquery', 'layer'], function () {
        var element = layui.element;
        var $ = layui.$ //重点处
            ,layer = layui.layer;

        element.on('nav(testR)', function (data) {
            var att = data.attr('name');
            if ( att  == 'exit') {
                console.log('exit');

                    $.ajax({
                        type: "post",
                        url: 'userExit',
                        success: function (data){
                            if(!data){
                                alert("账号已退出");
                                window.location.href='http://127.0.0.1';
                            }
                        }
                    });
            }
        });



        element.on('nav(test)', function (data) {
            var att = data.attr('name');
            if ( att  == 'manage') {
                if($("[lay-id='1']").attr("lay-id")!=1){
                    element.tabAdd('demo', {
                        title: '用户管理'
                        ,content: '<iframe src="manageUser" class="frame" frameborder="0" scrolling="no"></iframe>'
                        ,id: 1
                    });
                    element.tabChange('demo', '1'); //切换到：用户管理
                }else{
                    element.tabChange('demo', '1');
                }

            }
            if ( att  == 'material') {
                if($("[lay-id='2']").attr("lay-id")!=2){
                    element.tabAdd('demo', {
                        title: '教材挂名'
                        ,content: '<iframe src="manageMaterial" class="frame" frameborder="0" scrolling="no"></iframe>'
                        ,id: 2
                    });
                    element.tabChange('demo', '2'); //切换到：教材
                }else{
                    element.tabChange('demo', '2');
                }

            }
            if ( att  == 'treatise') {
                if($("[lay-id='3']").attr("lay-id")!=3){
                    element.tabAdd('demo', {
                        title: '专著出版'
                        ,content: '<iframe src="manageUser" class="frame" frameborder="0" scrolling="no"></iframe>'
                        ,id: 3
                    });
                    element.tabChange('demo', '3'); //切换到：专著
                }else{
                    element.tabChange('demo', '3');
                }

            }
        });




    });
</script>



<script type="text/html" id="barDemo">
    <!--<a class="layui-btn layui-btn-mini" lay-event="detail">查看</a>-->
    <a class="layui-btn layui-btn-mini" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>

    <!--&lt;!&ndash; 这里同样支持 laytpl 语法，如： &ndash;&gt;-->
    <!--{{#  if(d.auth > 2){ }}-->
    <!--<a class="layui-btn layui-btn-mini" lay-event="check">审核</a>-->
    <!--{{#  } }}-->
</script>















<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            ,tabDelete: function(othis){
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

    });
</script>
</body>
</html>